<template>
  <div id="chatRoom">
      <!--聊天区开始-->
      <div class="abs cover pnl-body" id="pnlBody">
          <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
              <div class="abs cover pnl-left" id="chatArea" v-show="isShowChat">
                  <div class="abs cover pnl-message scroll" id="show">
                      <div class="pnl-list" v-for="message in historyMessage">

                          <!-- 消息展示区域 -->
                          <!--对方在聊天框的左边-->
                          <div class="msg guest" v-if="message.fromName">
                              <div class="guest-name">{{ message.fromName }}</div>
                              <div class="msg-left">
                                  <div class="msg-host headDefault"></div>
                                  <div class="msg-ball">{{ message.message }}</div>
                              </div>
                          </div>
                          <!--自己在聊天框的右边-->
                          <div class="msg host" v-else>
                              <div class="hostname">
                                  <p>{{ username }}</p>
                              </div>
                              <div class="msg-right">
                                  <div class="msg-host photo">
                                      <!--                                    <img src="@/img/avatar/Member001.jpg" alt="">-->
                                  </div>
                                  <div class="msg-ball">
                                      {{ message.message }}
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="abs bottom pnl-text">
                      <div class="abs cover pnl-input">
                            <textarea class="scroll" id="context_text"
                                      @keyup.enter="submit" wrap="hard"
                                      placeholder="在此输入文字信息..."
                                      v-model="sendMessage.message">
                            </textarea>
                          <div class="abs auto-complete-pnl scroll hide">
                              <ul class="auto-complete"></ul>
                          </div>
                      </div>

                      <div class="abs br pnl-btn" id="submit" @click="submit"
                           style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
                          发送
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";

const webSocket = ref()

const isShowChat = ref(false)
const chatMes = ref(false)
const isOnline = ref(true)
const username = ref('')
const toName = ref('')
const sendMessage = ref({
    toName: '',
    message: ''
})
const historyMessage = ref([])
const friendsList = ref([])
const systemMessages = ref([])


</script>

<style scoped>
@import '@/css/chat.css';
/*@import '@/css/bootstrap.min.css';*/

#chatRoom{
    max-width: 1280px;
    margin:0 auto;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #667eea, #764ba2) repeat;
}

.guest-name {
    margin-left: 1%;
    font-size: 12px;
}

.hostname {
    font-size: 12px;
    margin-bottom: -2%;
    text-align: right;
}
</style>